<template>
	<view style="background-color: #181816; height: 100%;">
		<view class="cell_list">
			<!-- 头像 -->
			<view class="head">
				<u-cell-group :border="false">
					<u-cell :border="false" title="头像" :arrow="true" @click=""
						titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
						rightIcon="arrow-right">
						<!-- 右边自定义内容头像图片 -->
						<view class="head_img" slot="right-icon" :absolute="false">
							<button class="avatar-wrapper" open-type="chooseAvatar" @click="editHead()">
								<image :src="head"></image>
							</button>
						</view>
						<view slot="right-icon" :absolute="false">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
				<!-- <label>用户信息</label>
				<text>{{mobile}}</text> -->
			</view>
			<!-- 昵称 -->
			<view class="nickName">
				<u-cell-group :border="false">
					<u-cell :border="false" title="昵称" :value="nickName" v-model="nickName" @click="editName()"
						:arrow="true" titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;">
						<!-- 右边自定义内容头像图片 -->
						<view slot="right-icon" :absolute="false">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
			<!-- 手机号 -->
			<view class="phone">
				<u-cell-group :border="false">
					<u-cell :border="false" title="手机号" :value="mobile" v-model="mobile" :arrow="true"
						titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;">
						<!-- <view slot="right-icon" :absolute="false">
              <u-icon name="arrow-right"></u-icon>
            </view> -->
					</u-cell>
				</u-cell-group>
			</view>
			<!-- 实名认证 -->
<!-- 			<view class="verify">
				<u-cell-group :border="false">
					<u-cell :border="false" title="实名认证" @click="goVerify" :arrow="true"
						titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;">
						<text style="color: #606266;" slot="value" class="verify-null" v-if="isVerify == '未认证'">
							未认证
						</text>
						<view slot="right-icon" :absolute="false" v-if="isVerify == '未认证'">
							<u-icon name="arrow-right"></u-icon>
						</view>
						<text slot="value" class="u-slot-value" v-if="isVerify == '已认证'">
							已认证
						</text>
					</u-cell>
				</u-cell-group>
			</view> -->
		</view>

		<!-- 退出登陆 -->
		<view class="quit" @click="logout">
			退出登录
		</view>
		<!-- 修改昵称弹框 -->
		<u-popup :show="showEditName" :round="20" @close="close" mode="center" bgColor="transparent"
			:safeAreaInsetBottom="false" :closeOnClickOverlay="true">
			<view class="edit_name" style="
          width: 600rpx;
          margin: auto;
          background-color: #242424;
          color: #fff;
          border-radius: 20rpx;
        ">
				<view class="title">修改昵称</view>
				<view class="used_name">原昵称：{{ nickName }}</view>
				<view class="input">
					<input v-model="newNickname" placeholder="支持2-16位中英文字母"
						placeholder-style="text-align:center;line-height:80rpx" />
				</view>
				<view class="btn" style="display: flex;">
					<button class="btn_style" @click="close()">取消</button>
					<button class="btn_style" @click="confirmEdit">确认</button>
				</view>
			</view>
		</u-popup>
		<ksp-cropper mode="free" :width="500" :height="500" :maxWidth="1024" :maxHeight="1024" :url="url"
			@cancel="oncancel" @ok="onok"></ksp-cropper>
	</view>
</template>

<script>
	import api from '@/request/api.js'
	import jWeixin from '@/node_modules/jweixin-module/lib/index.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				screenHeight: 0,
				head: '',
				token: '', //用户token
				uid: '', //用户id
				mobile: '', //用户注册手机号
				nickName: '', //用户昵称
				newNickname: '',
				update_time: '', //用户注册时间
				user_moilbe: false,
				showEditName: false,
				isVerify: '',
				ua: '',
				launch: false,
				url:'',
				path:''
			}
		},
		mounted() {
			this.launch = true
			const url = location.href
			this.configSDK(url, {
				title: '卯时数字 - 进入我的',
				desc: '打造个人数字资产专属空间',
				link: 'https://h5.onedaen.com/pages/mine/mine',
				imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
			})
			if (!this.ua) return
			document.getElementsByClassName('uni-page-head__title')[0].style.display =
				'none'
		},
		onLoad() {
			const ua = window.navigator.userAgent.toLowerCase()
			this.ua = ua.match(/MicroMessenger/i) == 'micromessenger'
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
					console.log(this.screenHeight)
				},
			})
			this.getInfo()
			// 加载我的信息需判断用户是否登录
			if (this.token == '') {
				/* 提示用户需要登录操作 */
				uni.showModal({
					title: '提示',
					content: '请先登录再进行操作',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
							uni.redirectTo({
								url: 'mine',
							})
							/*  */
						} else if (res.cancel) {}
					},
				})
			}
		},
		onShow() {
			if (!this.launch) return
			const url = location.href
			this.configSDK(url, {
				title: '卯时数字 - 进入我的',
				desc: '打造个人数字资产专属空间',
				link: 'https://h5.onedaen.com/pages/mine/mine',
				imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
			})
		},
		methods: {
			// 获取用户信息
			getInfo() {
				/* 读取缓存 */
				let userInfo = uni.getStorageSync('userInfo')
				console.log(userInfo)
				if (userInfo.nickName == null || userInfo.nickName == '') {
					this.nickName = '用户昵称未设置'
				} else {
					this.nickName = userInfo.nickName
				}
				let mobile = userInfo.mobile
				this.mobile = String(mobile).replace(
					String(mobile).slice(3, 7),
					'*'.repeat(4),
				)
				this.head = userInfo.avatarUrl
				this.token = userInfo.token
				this.uid = userInfo.uid
				if (this.mobile != '') {
					this.user_moilbe = true
				}
				if (userInfo.is_auth == 1) {
					this.isVerify = '未认证'
				} else {
					this.isVerify = '已认证'
				}
				this.update_time = userInfo.update_time
			},
			async configSDK(url, {
				title,
				desc,
				link,
				imgUrl
			}) {
				// const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

				const upUrl = encodeURIComponent(url)
				api.shareData({
					url: upUrl
				}).then((res) => {
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData',
						'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
					})

					jWeixin.ready(() => {
						// 分享给朋友
						jWeixin.updateAppMessageShareData({
							title, // 分享标题
							// desc: this.activity_detail.description, // 分享描述
							desc,
							link: res.data.url,
							imgUrl, // 分享图标
							success: () => {
								// 设置成功
								console.log('设置成功')
							},
						})
						// 分享到朋友圈
						jWeixin.updateTimelineShareData({
							title, // 分享标题
							link: res.data.url,
							imgUrl, // 分享图标
							success: () => {
								console.log('设置成功')
								// 设置成功
							},
						})
					})
				})
			},
			logout() {
				uni.removeStorage({
					key: 'userInfo',
					success: function(res) {
						uni.setStorageSync('hasLogin', false)
						setTimeout(() => {
							uni.reLaunch({
									url: 'mine',
								},
								1000,
							)
						})
					},
				})
			},
			/* 修改昵称 */
			editName() {
				this.showEditName = true
			},
			close() {
				this.showEditName = false
			},
			confirmEdit() {
				let userInfo = uni.getStorageSync('userInfo')
				let token = userInfo.token
				let uid = userInfo.uid
				const data = {
					uid: uid,
					token: token,
					nickname: this.newNickname,
				}
				api.editUsername(data).then((res) => {
					if (res.code == 200) {
						this.close()
						uni.showToast({
							title: '修改成功',
						})
						const info = uni.getStorageSync('userInfo')
						info.nickName = data.nickname
						info.nickname = data.nickname
						uni.setStorageSync('userInfo', info)
						this.getInfo()
					} else {
						uni.showToast({
							title: '修改失败',
							icon: 'error',
						})
					}
				})
			},
			/* 获取或修改头像 */
			onok(ev) {
				this.url = "";
				this.path = ev.path;
				this.uploadFile(ev.path)
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			uploadFile(path) {
				let userInfo = uni.getStorageSync('userInfo')
				let token = userInfo.token
				let uid = userInfo.uid
                       //上传文件
						uni.uploadFile({
							url: 'https://publish.onedaen.com/h5/app/upload_avatar',
							filePath: path,
							header: {
								uid: uid,
								token: token,
							},
							name: 'file',
							success: (e) => {
								console.log(e)
								console.log(e.data)
								console.log(JSON.parse(e.data))
								if (JSON.parse(e.data).code == 200) {
									let headUrl = JSON.parse(e.data).data.url
									this.head = headUrl
									const info = uni.getStorageSync('userInfo')
									info.avatarUrl = this.head
									uni.setStorageSync('userInfo', info)
								} else {
									uni.showModal({
										title: '提示信息',
										content: '更改失败！',
									})
								}
							},
						})
			},
			/* 修改头像 */
			editHead() {
				let userInfo = uni.getStorageSync('userInfo')
				let token = userInfo.token
				let uid = userInfo.uid
				console.log(token)
				console.log(uid)
				// 1，选择头像文件
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res)
						this.url=res.tempFilePaths[0]
					},
				})
			},

			// 实名认证
			goVerify() {
				if (this.isVerify == '未认证') {
					uni.navigateTo({
						url: '../verify/verify',
					})
				} else {
					return
					uni.navigateTo({
						url: '../verify/verify_success',
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.cell_list {
		padding: 20rpx 0;

		.head {
			display: flex;
			width: 90%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: #242424;

			.head_img {
				width: 60rpx;
				height: 60rpx;
				margin: 20rpx 0;

				button {
					width: 60rpx;
					height: 60rpx;
					background: #181816;
					border: 0;
					border-radius: 100%;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
					left: 0;
					position: absolute;
				}
			}
		}

		.nickName {
			width: 90%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: #242424;
		}

		.phone {
			width: 90%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: #242424;

			/deep/ .u-cell__value {
				padding-right: 40rpx;
			}
		}

		.verify {
			width: 90%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: #242424;
			color: #fff !important;

			.verify-right {
				display: flex;
				align-items: center;

				/deep/.u-icon--right {
					margin-left: 8rpx;
				}

				.verify-null {
					color: #606266;
					font-size: 28rpx;
				}
			}

			.u-slot-value {
				padding-right: 20rpx;
				color: #606266;
				font-size: 28rpx;
			}

			// ::v-deep .u-cell__value {
			//   padding-right: 40rpx;
			// }
		}
	}

	.quit {
		width: 90%;
		margin: 20rpx auto;
		height: 110rpx;
		background-color: #242424;
		border-radius: 20rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 110rpx;
		color: #ed4747;
	}

	/* 修改昵称弹窗 */
	.edit_name {
		.title {
			margin-top: 40rpx;
			text-align: center;
		}

		.used_name {
			margin-top: 40rpx;
			text-align: center;
		}

		.input {
			width: 90%;
			margin: 40rpx auto;
			background-color: #181816;
			height: 40rpx;
			padding: 20rpx 0;
			border-radius: 5rpx;

			/deep/ input {
				text-align: center !important;
				border-radius: 5rpx !important;
			}
		}
	}

	.btn {
		display: flex;

		.btn_style {
			background-color: #242424;
			border: 0;
			color: #fff;
			width: 50%;
		}
	}

	/* 自定义单元格 */
	/deep/.u-cell__body {
		padding: 0 20rpx !important;
	}

	/deep/.u-icon--right {
		text {
			font-size: 30rpx !important;
		}
	}

	/deep/.u-cell__title-text {
		line-height: 100rpx !important;
	}
</style>
